import React from 'react';
import { Table, Divider, Modal } from 'antd';
import Page from 'components/common/Page';
import SearchBar from './SearchBar';
import { model } from 'utils/model';
import { extraFields } from 'utils/share';
import fields from './fields';


@model('articleList')
class ArticleList extends React.Component {
  constructor(props) {
    super(props);
    this.state = {
      visAdd: false,
      visResetPass: false,
      record: {}
    };
    this.settingHandler = this.settingHandler.bind(this);
    this.del = this.del.bind(this);
  }

  del(params) {
    const { del, loading } = this.props;
    Modal.confirm({
      title: '你确定要执行此操作？',
      cancelText: '取消',
      okText: '确定',
      confirmLoading: loading.del,
      onOk() {
        del(params);
      }
    });
  }


  // 扩展字段
  extraFields(){
    const { push } = this.props;
    const del = this.del;
    const extra = [
      {
        title: '标题',
        dataIndex: 'title',
        render: (text, record) => (
          <a href="javascript:;" onClick={() => push(`/article/create/${record.id}`)}>{record.title}</a>
        )
      },
      {
        title: '操作',
        key: 'action',
        render: (text, record) => (
          <span>
            <a href="javascript:;" onClick={() => push(`/article/create/${record.id}`)}>修改</a>
            <Divider type="vertical" />
            <a href="javascript:;" onClick={() => del({ id: record.id })}>删除</a>
          </span>
        )
      }
    ];
    return extraFields(fields, extra);
  }
  settingHandler(type, value, record = {}) {
    this.setState({
      record,
      [type]: value
    });
  }

  render() {
    const { config, loading, push,
      getList, goPage } = this.props;
    const { record } = this.state;
    const { pagination, list } = config;
    const tableProps = {
      pagination: {
        ...pagination,
        onChange: current => {
          goPage(current);
          getList();
        }
      },
      loading: loading.list,
      rowKey: (record, index) => index,
      dataSource: list,
      columns: this.extraFields()
    };
    const searchProps = {
      push,
      record,
      add: () => this.settingHandler('visAdd', true),
      onSearch(params){
        goPage(1);
        getList(params);
      }
    };
    
  
    return (
      <Page inner>
        <div>
          <SearchBar {...searchProps} />
          <Table {...tableProps} style={{marginTop: 20}} />
        </div>
      </Page>
    );
  }
}

export default ArticleList;
